<template>
    <a-popover title="修改记录">
        <template #content>
            <div class="edit-record">
                <div class="record-table">
                    <a-row class="table-header">
                        <a-col :span="12" class="table-cell">创建者</a-col>
                        <a-col :span="12" class="table-cell">创建时间</a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12" class="table-cell">{{ row.createUserName || "无" }}</a-col>
                        <a-col :span="12" class="table-cell">{{ row.createTime }}</a-col>
                    </a-row>
                    <a-row class="table-header">
                        <a-col :span="12" class="table-cell">修改者</a-col>
                        <a-col :span="12" class="table-cell">修改时间</a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12" class="table-cell">{{ row.updateUserName || "无"}}</a-col>
                        <a-col :span="12" class="table-cell">{{ row.updateTime || "无" }}</a-col>
                    </a-row>
                    <a-row class="table-header">
                        <a-col :span="24" class="table-cell">备注</a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="24" class="table-cell">{{  row.remark || "无" }}</a-col>
                    </a-row>
                </div>
            </div>
        </template>
        <div>
            <ExclamationCircleOutlined/>
            详情    
        </div>               
    </a-popover>
</template>

<script setup lang="ts">
import { withDefaults } from 'vue';

withDefaults(defineProps<{
    row:any
}>(),{})
</script>

<style lang="scss" scoped>
.edit-record {
    min-width: 400px;
    .record-table {
        border: 1px solid #e8e8e8;
        .table-header {
            background-color: #e6f4ff;
        }
        .table-cell {
            padding: 8px 12px;
            border: 1px solid #e8e8e8;
            word-break: break-all;
        }
    }
}
</style>